import { useState, useEffect, useCallback } from 'react';
import { Input, Row, Col, Button } from 'antd';
import { ContainerWrapper } from './style';
import MonkeyEditor from '../../components/MonkeyEditor';
import { MonkeyLexer } from '@/utils';

function MonkeyCompilerIde() {
  const [keywords, setKeywords] = useState<string>('');
  const lexer = new MonkeyLexer(keywords);

  return (
    <ContainerWrapper>
      <div>MonkeyCompiler IDE</div>
      <div>
        <MonkeyEditor keywords={lexer.getKeywords()} />
      </div>
      <div>
        <Button
          type="primary"
          onClick={() => {
            lexer.lexing();
          }}
        >
          Lexing
        </Button>
      </div>
    </ContainerWrapper>
  );
}

export default MonkeyCompilerIde;
